<template>
  <div>
        <h1 style="text-align:center;">分类列表</h1>
        <el-button type="primary" 
        v-permission="{path: '/cat/add', name: '分类添加'}"
        @click="$router.push('/cat/add')">新增分类</el-button>
            <el-table
                :data="catlist"
                style="width: 100%">
                <el-table-column
                    prop="catname"
                    label="分类名称"
                    width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="big"
                        v-permission="{path: '/cat/edit', name: '分类修改'}"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="big"
                        type="danger"
                        v-permission="{path:'/cat/del', name:'分类删除'}"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分类编辑  对话框做-->
            <el-dialog
                title="分类修改"
                :visible.sync="dialogVisible"
                width="30%"
            >
            <h1 style="text-align: center;">分类修改</h1>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="分类名称">
                        <el-input v-model="form.catname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即修改</el-button>
                        <el-button @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
        </el-dialog>
     </div>
</template>

<script>
// 导入获取所有分类  分类编辑 分类删除
import {CatList, CatEdit ,CatDel} from '@/request'
//导入按钮自定义指令权限  函数
import permission from '@/utils/permission'

export default {
      //使用自定义指令 值是一个对象  键是自定义指令的名字
  directives: {
      //也应该是一个对象  当只有bind和updated 可以简写 第一次绑定和修改时会使用的数据  经常情况下这两个函数是一样的可以简写成一个函数
      //需要有参数  el binding  键和值相等可以简写
      permission
      
  },
  data () {
    return {
        catlist:[],
        //对话框默认情况下隐藏 
        dialogVisible: false ,
        form: {
            catname: '',
            id:''
        }
      }
    },
  methods: {
       async onSubmit(){
        let data = await CatEdit(this.form)
        // console.log(data);
         let {error_code, msg} = data
            if(error_code === 200) {
                // 给弹窗  清空表单数据 让表单隐藏 重新发请求 渲染用户列表
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.dialogVisible = false
                        this.getCatList()
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }
        
        },
        async getCatList() {
            let data = await CatList()
            // console.log(data);
            this.catlist = data.data.catlist
            // console.log(this.catlist);
        },
        //编辑
       handleEdit(index, row) {
        //    console.log(index, row);
           //点击编辑 对话框显示
           this.dialogVisible = true
           //把this.form 的数据赋值给 this.form.catname
           this.form.catname = row.catname
           this.form.id = row._id
      },
        async handleDelete(index,row) {
            this.$confirm('你真的要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                CatDel(row._id).then(data =>{
                    let { error_code,msg } = data
                            if(error_code === 200 ){
                                this.$message({
                                    type: 'success',
                                    duration: 1500,
                                    message: msg,    
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 1500,
                                    message: msg,
                                })
                            }
                            this.getCatList()
                    }) 
                })
            //     .catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '停止删除'
            //     });          
            // });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        }, 
    },
    created(){
        this.getCatList()
    }
}
</script>

<style>
    
</style>
